<template>
  <view class="d-flex-column">
    <view class="text-lg py-lg">我的资产</view>
    <view class="my-assets">
      <view
        class="my-assets-item"
        @tap="goToWallet"
      >
        <view v-if="userInfo">
          <text class="text-xs">￥</text>
          <text class="text-xl font-bold">
            {{ userInfo.balance || 0 }}
          </text>
        </view>
        <view v-else>
          <text class="text-xl"> *** </text>
        </view>
        <view class="text-color-grey text-sm">余额</view>
      </view>
      <view
        class="my-assets-item"
        @tap="goToGiftCard"
      >
        <view v-if="userInfo">
          <text class="text-xs">￥</text>
          <text class="text-xl font-bold">
            {{ userInfo.giftCard || 0 }}
          </text>
        </view>
        <view v-else>
          <text class="text-xl"> *** </text>
        </view>
        <view class="text-color-grey text-sm">礼品卡</view>
      </view>
      <view
        class="my-assets-item"
        @tap="goToMyCoins"
      >
        <view v-if="userInfo">
          <text class="text-xl font-bold">
            {{ userInfo.coins || 0 }}
          </text>
        </view>
        <view v-else>
          <text class="text-xl"> *** </text>
        </view>
        <view class="text-color-grey text-sm">雪王币</view>
      </view>
      <view
        class="my-assets-item"
        @tap="goToMyCoupons"
      >
        <view v-if="userInfo">
          <text class="text-xl font-bold">
            {{ userInfo.coupons || 0 }}
          </text>
        </view>
        <view v-else>
          <text class="text-xl"> *** </text>
        </view>
        <view class="text-color-grey text-sm">优惠券</view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex"
export default {
  name: "MyAssets",
  computed: {
    ...mapState("user", ["userInfo"])
  },
  methods: {
    goToWallet() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: "/pages/customer-center/auth/auth"
        })
        return
      }
      uni.navigateTo({
        url: `/pages/customer-center/wallet/wallet`
      })
    },
    goToMyCoins() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: "/pages/customer-center/auth/auth"
        })
        return
      }
      uni.navigateTo({
        url: `/pages/customer-center/coins/coins`
      })
    },
    goToMyCoupons() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: "/pages/customer-center/auth/auth"
        })
        return
      }
      uni.navigateTo({
        url: `/pages/marketing/coupons/coupons`
      })
    },
    goToGiftCard() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: "/pages/customer-center/auth/auth"
        })
        return
      }
      uni.navigateTo({
        url: `/pages/marketing/gift-card/gift-card`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-assets {
  width: 100%;
  background-color: #fcf9f9;
  border-radius: $uni-border-radius-xl;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1rpx solid #ffe1e1;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $uni-spacing-row-xxl 0;
    gap: $uni-spacing-row-base;
  }
}
</style>
